<template>
   <div class="app-container">
    <el-image :src="data.url" loading ='lazy' @load="onLoad" @error="onError" fit="fill"/>
  </div>

</template>

<script>
// import { getAll,preview  } from "@/api/file/file";
// import pagination from "@/components/Pagination"; // Secondary package based on el-pagination


export default {
  name: "photo",
  props: {
    data: {
      required: true,
      type: Object,
      default:()=>{}
    }
  },
  data() {
    return {
      url: ""
    };
  },
  computed: {},
  created() {

  },
  methods: {
    onLoad(e) {
      //console.log("load",e)
    },
    onError(e) {
      //console.log("error",e)
     // this.preview(this.data)
},
  },
  mounted: function () {},
  watch: {
    data: {
      handler(val, oldVal) {
        console.log(this.url)
      },
      deep: true
    },
  }
};
</script>

<style lang="scss" scoped>
.app-container {
  height: 400px;
  overflow-y: auto;
}
</style>


